<template>
    <div class="fly-panel" style="margin-bottom:0;">
        <div class="fly-panel-title fly-filter">
            <a :class="{'layui-this':status === '' && tag === ''}" @click.prevent="search()">综合</a>
            <span class="fly-mid"></span>
            <a :class="{'layui-this':status === '0'}" @click.prevent="search(0)">未结</a>
            <span class="fly-mid"></span>
            <a :class="{'layui-this':status === '1'}" @click.prevent="search(1)">已结</a>
            <span class="fly-mid"></span>
            <a :class="{'layui-this':status === '' && tag === '精华'}" @click.prevent="search(2)">精华</a>
            <span class="fly-filter-right layui-hide-xs">
                <a :class="{'layui-this':sort === 'created'}" @click.prevent="search(3)">按最新</a>
                <span class="fly-mid"></span>
                <a :class="{'layui-this':sort === 'answer'}" @click.prevent="search(4)">按热议</a>
            </span>
        </div>
        <list-item :lists="lists" :isEnd="isEnd" @nextpage="nextPage()"></list-item>
    </div>
</template>
<script>
import ListItem from './ListItem'
import listMix from '@/mixin/list'
export default {
    name:'list',
    mixins:[listMix],
    data(){
        return{
            status:'',
            tag:'',
            sort:'created',
            page:0,
            limit:20,
            catalog:'',
            isEnd:false,
            isRepeat:false,
            current:'',
            lists:[]
        }
    },
    components:{
        ListItem
    },
    watch:{
        current(newval,oldval){
            // 去兼听current标签是否有变化，如果有变化，则需要重新进行查询
            this.init()
        },
        $route(newval,oldval){
            let catalog = this.$route.params['catalog']
            if(typeof catalog !=='undefined' && catalog !== ''){
                this.catalog = catalog
            }
            this.init()
        }
    },
    methods:{
        search(val){
            if(typeof val === 'undefined' && this.current === ''){
                return
            }
            this.current = val
            switch(val){
                //未结贴
                case 0:
                    this.status = '0'
                    this.tag = ''
                    break
                // 已结账
                case 1:
                    this.status = '1'
                    this.tag = ''
                    break
                //查询精华标签
                case 2:
                    this.status = ''
                    this.tag = '精华'
                    break
                //按照时间去查询
                case 3:
                    this.sort = "created"
                    break
                //按照评论数去查询
                case 4:
                    this.sort = 'answer'
                    break
                default:
                    this.status = ''
                    this.tag = ''
                    this.current = ''
            }
        }
    }
}
</script>